<template>
	<view class="all" :style="{'height':widHeight + 'px'}">
		<view class="my-userinfo-container">
			<!-- 头像昵称区域 -->
			<view class="top-box" @click="preview(userinfo.avatarUrl)">
				<image v-if="userinfo.avatarUrl" :src="userinfo.avatarUrl" class="avatar"></image>
				<image v-else :src="userinfo.avatarUrl" class="avatar"></image>
				<view class="nickname">{{userinfo.nickName}}</view>
			</view>
		</view>



		<u-line dashed></u-line>
		<view class="info-1" @click="amend">
			<view class="info-2">
				<view class="info-aaa">优购账号</view>
				<view class="info-3 info-zhan">
					<u-tooltip :text="text" overlay></u-tooltip>
				</view>
			</view>
			<view class="info-a"><u-icon name="arrow-right"></u-icon></view>
		</view>


		<u-line dashed></u-line>
		<view class="info-1" @click="introduce('优购昵称')">
			<view class="info-2">
				<view class="info-aaa">优购昵称</view>
				<view class="info-3 info-zhan">{{nickname || 'qer_afc'}}</view>
			</view>
			<view class="info-a"><u-icon name="arrow-right"></u-icon></view>
		</view>

		<u-line dashed></u-line>
		<view class="info-1" @click="introduce('自我介绍')">
			<view class="info-2">
				<view class="info-aaa">自我介绍</view>
				<view class="info-3 " v-if="selfIntroduction">{{selfIntroduction}}</view>
				<view class="info-3 info-in" v-else> 填写我的名字，帮助好友认出我</view>

			</view>
			<view class="info-a"><u-icon name="arrow-right"></u-icon></view>
		</view>

		<u-line dashed></u-line>
		<view class="info-1" @click="secrecy('bottom')">
			<view class="info-2">
				<view class="info-aaa">性别</view>
				<view class="info-3 info-ms"><text>{{gender}}</text><text class="info-ms1">性别信息用于逛逛等社交场景</text></view>
			</view>
			<view class="info-a"><u-icon name="arrow-right"></u-icon></view>
		</view>

		<u-line dashed></u-line>
		<navigator url='/subAbility/personalSignature/personalSignature'>
			<view class="info-1">
				<view class="info-2">
					<view class="info-aaa">个性签名</view>
					<view class="info-3 info-aaa-text">{{sign}}</view>
				</view>
				<view class="info-a"><u-icon name="arrow-right"></u-icon></view>
			</view>
		</navigator>


		<u-line dashed></u-line>
		<view class="info-1" @click="QRcode('center')">
			<view class="info-2">
				<view class="info-aaa">我的二维码</view>
				<view class="info-3"></view>
			</view>
			<view class="info-a"><u-icon name="arrow-right"></u-icon></view>
		</view>
		<!-- 对话框 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" :title="title" :placeholder="placeholder"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 性别选择 -->
		<uni-popup ref="popup" background-color="#fff">
			<u-button @click="select('男生')">男生</u-button>
			<u-button @click="select('女生')">女生</u-button>
			<u-button @click="select('保密')">保密</u-button>
			<u-button color="#999999" @click="close">取消</u-button>
		</uni-popup>

		<uni-popup ref="popup1" background-color="#fff">
			<view class="">
				<image src="../../static/二维码.png" mode="aspectFit"></image>
				<view class="qs">
					优购二维码
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
	} from "vuex"
	export default {
		data() {
			return {
				widHeight: 0,
				value: true, //控制是否昵称、介绍
				text: '', //账号
				title: '设置自我介绍',
				placeholder: '填写姓名',

			};
		},
		onLoad() {
			uni.$setNavigationBarColor()
			this.text = this.settingAccount
			const windowInfo = uni.getWindowInfo()
			this.widHeight = windowInfo.windowHeight //可使用窗口宽度
		},
		computed: {
			...mapState("login", ["userinfo"]),
			...mapState("setting", ["settingAccount", "selfIntroduction", 'nickname', "gender", 'sign']),
		},
		methods: {
			...mapMutations('setting', ["updataselfIntroduction", 'updataNickname', "updataGender"]),
			//预览照片
			preview(imgUrl) {
				wx.previewImage({
					current: imgUrl, // 当前显示图片的http链接
					urls: [imgUrl] // 需要预览的图片http链接列表
				})
			},

			//修改账号名
			amend() {
				uni.navigateTo({
					url: "/subAbility/modifyAccount/modifyAccount?titile=淘宝账号"
				})
			},
			//自我介绍/昵称
			introduce(nmae) {
				if (nmae == '自我介绍') {
					this.value = true
					this.title = '设置自我介绍'
					this.placeholder = '填写姓名'
				} else {
					this.value = false
					this.title = '设置昵称'
					this.placeholder = '填写昵称'
				}
				this.$refs.inputDialog.open()
			},
			//自我介绍内容
			dialogInputConfirm(name) {

				if (name.trim().length == 0) {
					return uni.$showToast("内容不能为空", "error")
				}
				uni.showLoading({
					title: '更改中……'
				})

				setTimeout(() => {
					uni.hideLoading()
					this.$refs.inputDialog.close()
					if (this.value) {
						this.updataselfIntroduction(name)
					} else {
						this.updataNickname(name)
					}
				}, 1500)

			},
			//性别
			secrecy(type) {
				this.$refs.popup.open(type)
			},
			//二维码
			QRcode(type) {
				this.$refs.popup1.open(type)
			},

			//关闭提示框
			close() {
				this.$refs.popup.close()
			},
			//性别选择
			select(sex) {
				this.updataGender(sex)
				this.close()
			}
		},
	}
</script>

<style lang="scss">
	.all {
		background-color: #eeeeee;
	}

	.qs {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #c00000;
	}

	.my-userinfo-container {

		// 为整个组件的结构添加浅灰色的背景
		background-color: #f4f4f4;

		.top-box {
			height: 400rpx;
			background-color: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;



			.avatar {
				display: block;
				width: 180rpx;
				height: 180rpx;
				border-radius: 90rpx;
				border: 4rpx solid white;
				box-shadow: 0 2rpx 10rpx black;
			}

			.nickname {
				color: #db8650;
				font-weight: bold;
				font-size: 32rpx;
				margin-top: 20rpx;
			}
		}
	}


	.info-a {
		display: flex;
		align-items: center;
	}

	.info-1 {

		background-color: white;
		display: flex;
		color: #000;
		justify-content: space-between;
		padding: 0 10px 0 10px;
		height: 45px;

		.info-2 {
			display: flex;
			align-items: center;
			width: 100%;

			.info-aaa-text {
				font-size: 14px;
				width: 25%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.info-aaa {
				font-size: 15px;
			}

			.info-3 {
				padding-left: 20px;
			}

			.info-zhan {
				font-size: 14px;
			}

			.info-in {
				font-size: 14px;
				color: #d6d6d6;
			}

			.info-ms {
				padding-left: 50px;
				font-size: 14px;

				.info-ms1 {
					padding-left: 10px;
					color: #d6d6d6;
				}
			}
		}
	}
</style>